<!DOCTYPE html>
<meta charset="utf-8">
<html><head><title>Web Socket Test</title></head>
<body>
<script type="text/javascript">
    var socket;
    var i =0;
    function toClose() {
        if (socket && socket.readyState == socket.OPEN) {
            socket.close();
        }
    }
    function connect() {
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {
            if (!socket || socket.readyState == socket.CLOSED) {
                // ws://localhost:8080/ivr/ws?user-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJBUFAiLCJ1c2VySW5mbyI6IntcImlkXCI6NyxcIm5hbWVcIjpcImp3XCJ9IiwiaXNzIjoiU2VydmljZSIsImV4cCI6MTY0NzMyNTkzOCwiaWF0IjoxNjQ2NzIxMTM4fQ.OvuBC1ItAle77DK4Snid2M5IZT4wVuwUIKG0AVFpntY
                socket = new WebSocket("ws://" + window.location.host + "/ivr/ws", "vire");
                socket.onmessage = function (event) {
                    i++;
                    var ta = document.getElementById('responseText');
                    if (i > 20) {
                        ta.value = event.data;
                        i = 0;
                    } else {
                        ta.value = ta.value + '\n' + event.data;
                    }
                };

                socket.onopen = function (event) {
                    i++;
                    var ta = document.getElementById('responseText');
                    ta.value = ta.value + "\n" + "websocket连接已【建立】!";
                };
                socket.onclose = function (event) {
                    i++;
                    var ta = document.getElementById('responseText');
                    ta.value = ta.value + "\n" + "websocket连接已【断开】";
                };
            }

        } else {
            alert("Your browser does not support Web Socket.");
        }
    }
    function send(message) {
        if (!window.WebSocket) { return; }
        if (socket.readyState == WebSocket.OPEN) {
            if (message) {
                socket.send(message);
            } else {
                socket.ping();
            }
        } else {
            alert("The socket is not open.");
        }
    }
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
</script>
<form onsubmit="return false;">
    <input type="text" name="message" value='{"id": 1,"scenarioBaseId": 49,"lastStatisticsFilePointer":-1}' style="width:400px;height:50px;" />
    <input type="button" value="发送数据" onclick="send(this.form.message.value)"/>
    <input type="button" value="重新连接" onclick="connect()"/>
    <input type="button" value="断开连接" onclick="toClose()"/>
    <h3>Output</h3>
    <textarea id="responseText" style="width:1500px;height:800px;"></textarea>
</form>
</body>
</html>